<template>
  <div class="app-container">
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      size="80%"
      class="box-drawer"
      :with-header="false"
      :visible.sync="drawerreachlist"
    >
      <div style="position: relative">
        <div class="drawerTitle">
          <span>经理列表{{detailTitle}}</span>
          <div class="close" @click="cloneDrawer">
            <i class="el-icon-close" style="font-size: 24px" />
          </div>
        </div>
      </div>
      <div style="background-color: #fff">
        <div class="container-module" style="padding-bottom: 0">
          <el-form
            :inline="true"
            class="search-form"
            size="small"
            ref="searchForm"
            :model="searchForm"
          >
            <el-row style="display: flex">
              <div style="flex: 1">
                <el-form-item class="search-form-item" label="运营 ID">
                  <el-input
                    style="width: 100%"
                    v-model="searchForm.params.market_role_id"
                    placeholder="请输入运营id"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item class="search-form-item" label="用户名称">
                  <el-input
                    style="width: 100%"
                    v-model="searchForm.params.name"
                    placeholder="请输入用户名称"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item class="search-form-item" label="岗位级别">
                  <el-select
                    clearable
                    v-model="searchForm.market_role_id"
                    filterable
                  >
                    <el-option
                      v-for="item in SupplierList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div style="padding: 5px 0">
                <el-form-item>
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-search"
                    @click="getList"
                    >查询</el-button
                  >
                  <el-button
                    size="small"
                    type="primary"
                    icon="el-icon-refresh"
                    @click="resetting"
                    >重置</el-button
                  >
                  <el-button
                    v-if="!searchDisplay"
                    size="small"
                    icon="el-icon-caret-bottom"
                    @click="searchDisplay = true"
                    >展开</el-button
                  >
                  <el-button
                    v-else
                    size="small"
                    icon="el-icon-caret-top"
                    @click="searchDisplay = false"
                    >收起</el-button
                  >
                </el-form-item>
              </div>
            </el-row>
            <el-form-item
              v-if="searchDisplay"
              class="search-form-item"
              label="手机号"
            >
              <el-input
                style="width: 100%"
                v-model="searchForm.params.mobile"
                placeholder="请输入手机号"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              class="search-form-item"
              label="结算时段"
            >
              <el-date-picker
                @change="domeTimeWay"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                v-model="establishTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <el-divider></el-divider>
        <div style="padding: 0 20px">
          <div class="marginBottom">
            <el-row :gutter="24">
              <el-col :span="16"> </el-col>
              <el-col :span="4" style="float: right">
                <div class="right-panel el-button-group">
                  <el-button
                    class=""
                    icon="el-icon-refresh"
                    size="mini"
                    @click="getList"
                  ></el-button>
                  <el-dropdown trigger="click" :hide-on-click="false">
                    <span class="el-dropdown-link">
                      <el-button
                        class=""
                        icon="el-icon-s-operation"
                        size="mini"
                      ></el-button>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item
                        v-for="fruit in allTableThead"
                        :key="fruit"
                      >
                        <el-checkbox
                          v-model="checkboxTableThead"
                          :label="fruit"
                          >{{ tableTheadOptions[fruit].label }}</el-checkbox
                        >
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="20">
            <el-col class="new_table_card">
              <el-table
                highlight-current-row
                :data="managerList"
                :header-cell-style="{
                  'background-color': '#f3f8fe',
                  color: '#606266',
                  height: '50px',
                }"
                style="width: 100%"
                border
                v-loading="loading"
              >
                <el-table-column
                  v-for="fruit in tableThead"
                  :key="fruit"
                  :label="tableTheadOptions[fruit].label"
                  width="140"
                  align="center"
                >
                  <template slot-scope="scope">
                    <div v-if="fruit == 'region'">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="
                          scope.row.province_name + scope.row.city_name + ''
                        "
                        placement="top"
                      >
                        <div>
                          {{ scope.row.province_name }}{{ scope.row.city_name }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else-if="fruit == 'monthly_transaction_number'">
                      <el-tooltip
                        placement="top-start"
                        :content="scope.row.deal.order_total_num + ''"
                      >
                        <div class="one_line_hidden">
                          {{ scope.row.deal.order_total_num }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else-if="fruit == 'monthly_excuse_number'">
                      <el-tooltip
                        placement="top-start"
                        :content="scope.row.refund.refund_total_num + ''"
                      >
                        <div class="one_line_hidden">
                          {{ scope.row.refund.refund_total_num }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else-if="fruit == 'monthly_sales_money'">
                      <el-tooltip
                        placement="top-start"
                        :content="scope.row.deal.price_total_num + ''"
                      >
                        <div class="one_line_hidden">
                          {{ scope.row.deal.price_total_num }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else-if="fruit == 'monthl_ysales_money_actual'">
                      <el-tooltip
                        placement="top-start"
                        :content="scope.row.deal.price_total_num + ''"
                      >
                        <div class="one_line_hidden">
                          {{ scope.row.deal.price_total_num }}
                        </div>
                      </el-tooltip>
                    </div>
                    <div v-else>
                      <el-tooltip
                        placement="top-start"
                        :content="scope.row[fruit] + ''"
                      >
                        <div class="one_line_hidden">
                          {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                        </div>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row style="text-align: right">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="searchForm.page"
              :limit.sync="searchForm.count"
              @pagination="getList"
            />
          </el-row>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
  
  <script>
import { managerlist,rolelist } from "@/api/manager/index";

const tableTheadOption = {
  id: {
    label: "运营ID",
    field: "id",
  },
  region: {
    label: "负责区域",
    field: "region",
  },
  name: {
    label: "用户名称",
    field: "name",
  },
  market_role_name: {
    label: "岗位级别",
    field: "market_role_name",
  },
  member_num: {
    label: "团队人数",
    field: "member_num",
  },
  created_at: {
    label: "建团时间",
    field: "created_at",
  },
  monthly_transaction_number: {
    label: "月成交订单数",
    field: "monthly_transaction_number",
  },
  monthly_excuse_number: {
    label: "月退单数",
    field: "monthly_excuse_number",
  },
  monthly_sales_money: {
    label: "月销售额",
    field: "monthly_sales_money",
  },
  monthl_ysales_money_actual: {
    label: "月实际成交额",
    field: "monthl_ysales_money_actual",
  },
  role_time: {
    label: "最近调级时间",
    field: "role_time",
  },
};
const allTableThead = [
  "id",
  "region",
  "name",
  "market_role_name",
  "member_num",
  "created_at",
  "monthly_transaction_number",
  "monthly_excuse_number",
  "monthly_sales_money",
  "monthl_ysales_money_actual",
  "role_time",
];
const defaultTableThead = [
  "id",
  "region",
  "name",
  "market_role_name",
  "member_num",
  "created_at",
  "monthly_transaction_number",
  "monthly_excuse_number",
  "monthly_sales_money",
  "monthl_ysales_money_actual",
  "role_time",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
      this.$nextTick(() => {
        this.$refs.tablerefs.doLayout();
      });
    },
  },
  components: {},
  data() {
    return {
      managerList: [], //列表数据
      SupplierList: [],//岗位级别
      drawerreachlist: false,
      loading: false, //加载
      detailTitle: "", //抽屉标题
      establishTime: [], //结算时间段
      // 默认表头
      tableTheadOptions: tableTheadOption, //所有表头
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      searchDisplay: false,

      searchForm: {
        params: {
          market_role_id: "", // 运营id
          name: "",
          mobile: "",
          create_time_start: "",
          create_time_end: "",
          market_time_start: "",
          market_time_end: "",
          user_id: "",
        },
        page: 1,
        count: 10,
      },
      total: 0,
    };
  },
  created() {
    this.getList(); //运营经理列表
    this.getroleList(); //岗位级别
  },
  methods: {
    //父组件传值
    open(id,title) {
      console.log("111111");
      this.detailTitle = title;
      this.drawerreachlist = true;
    },
     // 获取岗位级别
     getroleList() {
      rolelist(this.roleForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.SupplierList = res.data.list;
      });
    },
    // 关闭弹框
    cloneDrawer() {
      this.drawerreachlist = false;
      setTimeout(() => {
        this.$parent.resetting();
      }, 500);
    },

    // 获取列表
    getList() {
      this.loading = true;
      managerlist(this.searchForm).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          this.loading = false;
          return;
        }
        this.managerList = res.data.list;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    //重置
    resetting() {
      this.searchForm = {
        params: {
          market_role_id: "",
          name: "",
          mobile: "",
          create_time_start: "",
          create_time_end: "",
          market_time_start: "",
          market_time_end: "",
          user_id: "",
        },
        page: 1,
        count: 10,
      };
      this.establishTime = [];
      this.operatingtime = [];
      this.getList();
    },
    //结算时间
    domeTimeWay(val) {
      if (val.length !== 0) {
        this.searchForm.params.create_time_start = val[0];
        this.searchForm.params.create_time_end = val[1];
      } else {
        this.searchForm.params.create_time_start = "";
        this.searchForm.params.create_time_end = "";
      }
    },
  },
};
</script>
  
  <style>
</style>
  